<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .box {
            border: 100px solid pink;
            width: 0;
            border-top-color: gold;
            border-bottom-color: blue;
            border-left-color: red;
            border-right-color: green;

        }

        .cantainer {
            background-color: antiquewhite;
            width: 200px;
            height: 200px;
            margin: 50px auto;
        }
    </style>
</head>

<body>

    <h3>分成四个角度，判断进入方向</h3>
    <div class="box">


    </div>


    <div class="cantainer">

    </div>

    <script>
        let container = document.querySelector('.cantainer');

        // 获取容器的宽高
        let rect = container.getBoundingClientRect();
        // 求基准值，我们以盒子中心为原点，以右上角为基准坐标，求坐标到原点的弧度
        // 计算机y轴朝下的
        // 角度 = 弧度 * 180 / Math.PI
        // 弧度 = 角度 * Math.
        // Math.atan2(y,x),第一个参数是y轴，第二个是x轴
        let theta = Math.atan2(rect.height/2, rect.width/2);

        container.addEventListener('mouseenter', function (e) {

            // 获取鼠标进入的坐标
            const x = e.offsetX - rect.width / 2
            const y = rect.height / 2 - e.offsetY // y轴朝下，要反过来
            const d = Math.atan2(y, x)

            if (d < theta && d >= -theta) {
                console.log('right')
            } else if (d > theta && d <= Math.PI - theta) {
                console.log('top')
            } else if (d >= Math.PI - theta || d < -(Math.PI - theta)) {
                console.log('left')
            } else {
                console.log('bottom')
            }



        })

        container.addEventListener('mouseleave', function () {
            console.log('%c15.鼠标方向移入判断.html line:33 1', 'color: #007acc;', 1);
        })
    </script>

</body>

</html>